@use '@/styles/gobal.scss' as *;

.interaction {
    // box-sizing: content-box;
    // height: fit-content;
    // background-color: red;
    // padding: $spacing-lg;
    // height: calc(100vh - pxToRem(64)); // 假设顶部导航栏高度为64px
    // overflow: hidden;
    padding-bottom: pxToRem(48);
    // padding-bottom: pxToRem(100);

    &__title {
        font-size: pxToRem(24);
        color: $text-color;
        margin-bottom: $spacing-md;
    }

    &__row {
        display: flex;
        gap: $spacing-lg;
        margin-bottom: $spacing-lg;

        >div {
            flex: 1;
            min-width: 0; // 防止flex子项溢出
        }
    }

    &__section {
        background: #fff;
        border-radius: $border-radius-lg;
        padding: $spacing-md;
        height: 100%;
        box-shadow: $box-shadow;

        h3 {
            font-size: pxToRem(18);
            color: $text-color;
            margin-bottom: $spacing-md;
        }
    }

    &__formGroup {
        margin-bottom: $spacing-md;

        label {
            display: block;
            font-size: pxToRem(14);
            color: $text-color;
            margin-bottom: $spacing-xs;
        }

        select,
        input,
        textarea {
            width: 100%;
            padding: $spacing-xs $spacing-sm;
            border: pxToRem(1) solid $border-color;
            border-radius: $border-radius-md;
            font-size: pxToRem(14);

            &:focus {
                outline: none;
                border-color: $primary-color;
            }
        }

        textarea {
            resize: vertical;
            min-height: pxToRem(60); // 减小默认高度
            max-height: pxToRem(120); // 限制最大高度
        }
    }

    &__switch {
        display: flex;
        align-items: center;
        cursor: pointer;

        &Inner {
            width: pxToRem(50);
            height: pxToRem(24);
            background-color: #ddd;
            border-radius: pxToRem(12);
            margin-right: $spacing-sm;
            position: relative;
            transition: background-color $transition-duration;

            &--active {
                background-color: $primary-color;

                .interaction__switchHandle {
                    transform: translateX(pxToRem(26));
                }
            }
        }

        &Handle {
            position: absolute;
            top: pxToRem(2);
            left: pxToRem(2);
            width: pxToRem(20);
            height: pxToRem(20);
            background-color: #fff;
            border-radius: 50%;
            transition: transform $transition-duration;
        }

        &Text {
            font-size: pxToRem(14);
            color: $text-color-secondary;
        }
    }

    &__imageGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(pxToRem(150), 1fr)); // 减小图片大小
        gap: $spacing-sm;
        margin-top: $spacing-sm;
        max-height: pxToRem(300); // 限制最大高度
        overflow-y: auto;
    }

    &__imageItem {
        position: relative;
        aspect-ratio: 16/9;
        border-radius: $border-radius-md;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &:hover {
            .interaction__imageOverlay {
                opacity: 1;
            }
        }
    }

    &__imageOverlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity $transition-duration;
    }

    &__deleteBtn {
        padding: $spacing-xs $spacing-md;
        background-color: #ff4d4f;
        color: #fff;
        border-radius: $border-radius-md;
        cursor: pointer;
        transition: background-color $transition-duration;

        &:hover {
            background-color: #ff7875;
        }
    }

    &__uploadBtn {
        aspect-ratio: 16/9;
        border: pxToRem(2) dashed $border-color;
        border-radius: $border-radius-md;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all $transition-duration;

        span {
            color: $text-color-secondary;
            font-size: pxToRem(14);
        }

        &:hover {
            border-color: $primary-color;

            span {
                color: $primary-color;
            }
        }
    }

    &__submitBtn {
        padding: $spacing-sm $spacing-xl;
        background-color: $primary-color;
        color: #fff;
        border-radius: $border-radius-md;
        cursor: pointer;
        transition: background-color $transition-duration;

        &:hover {
            background-color: $primary-hover-color;
        }
    }

    &__input {
        width: 100%;
        padding: $spacing-sm;
        border: pxToRem(1) solid $border-color;
        border-radius: $border-radius-md;
        font-size: pxToRem(14);
        line-height: 1.5;

        &:focus {
            outline: none;
            border-color: $primary-color;
        }
    }

    &__textarea {
        width: 100%;
        padding: $spacing-sm;
        border: pxToRem(1) solid $border-color;
        border-radius: $border-radius-md;
        resize: vertical;
        font-size: pxToRem(14);
        line-height: 1.5;
        min-height: pxToRem(100);

        &:focus {
            outline: none;
            border-color: $primary-color;
        }
    }

    &__logoPreview {
        display: flex;
        align-items: center;
        gap: $spacing-md;
        margin-top: $spacing-sm;

        img {
            width: pxToRem(100);
            height: pxToRem(100);
            object-fit: contain;
            border-radius: $border-radius-md;
            border: pxToRem(1) solid $border-color;
            padding: $spacing-xs;
            background: #fff;
        }

        .interaction__uploadBtn {
            height: auto;
            aspect-ratio: auto;
            padding: $spacing-sm $spacing-md;
            border: pxToRem(1) solid $border-color;
            background: #fff;

            &:hover {
                border-color: $primary-color;
                background: rgba($primary-color, 0.05);
            }
        }
    }
}